<template>
  <div class="box">
    <h2 style="textAlign: center;color:#666">用户登录</h2>
    <el-form label-width="100px">
      <el-form-item 
      :rules="[
              { required: true, message: '姓名不能为空'},
              { type: 'string', message: '年龄必须为汉字'}
              ]">
        <el-input v-model="name" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item 
      :rules="[
              { required: true, message: '密码不能为空'},
              { type: 'number', message: '密码必须为数字值'}
              ]">
        <el-input type="password" v-model="password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item 
      :rules="[
              { required: true, message: '验证码不能为空'},
              { type: 'number', message: '验证码必须为数字值'}
              ]">
        <el-input v-model="num" style="width:100px" placeholder="验证码"></el-input><br>
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" style="width:80%">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
data() {
      return {
        name: '',
        password: '',
        num: '',
        checked: true
      };
    },
    methods: {
      submitForm() {
        axios.get('https://www.liulongbin.top:8888/api/private/v1/login', {
          params: {
            username: this.name,
            password: this.password
          }
        }).then(res=> {
          this.$message('登陆成功');
          localStorage.setItem('token', res.data.data.token);
          this.$router.push('/')
        })
      }
    }
}
</script>

<style>
.box {
  width: 500px;
  height: 500px;
  margin: 150px auto;
  border: #eee;
  border: 1px solid #eee;
}
</style>